<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试Kimi聊天记录导出器</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .chat-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .chat-header-content {
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .chat-header-content h2 {
            margin: 0;
            color: #333;
            font-size: 24px;
        }
        .chat-content-item {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
            position: relative;
        }
        .chat-content-item-user {
            background-color: #e3f2fd;
            margin-left: 50px;
        }
        .chat-content-item-assistant {
            background-color: #f5f5f5;
            margin-right: 50px;
        }
        .message-content {
            line-height: 1.6;
        }
        .message-time {
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 12px;
            color: #666;
        }
        .test-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section h3 {
            margin-top: 0;
            color: #1976d2;
        }
        pre {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            overflow-x: auto;
            margin: 10px 0;
        }
        code {
            background-color: #f4f4f4;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        blockquote {
            border-left: 4px solid #ccc;
            margin: 10px 0;
            padding-left: 15px;
            color: #666;
            font-style: italic;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .error {
            background-color: #ffebee;
            color: #c62828;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success {
            background-color: #e8f5e8;
            color: #2e7d32;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="test-section">
        <h3>📋 测试说明</h3>
        <p>这个页面模拟了Kimi聊天界面，用于测试聊天记录导出器的功能。页面包含了各种类型的内容：</p>
        <ul>
            <li>普通文本对话</li>
            <li>代码块和内联代码</li>
            <li>表格数据</li>
            <li>引用块</li>
            <li>有序和无序列表</li>
            <li>图片和链接</li>
            <li>各种标题级别</li>
        </ul>
        <p>点击右下角的导出按钮来测试脚本的导出功能。</p>
    </div>

    <div class="chat-container">
        <header class="chat-header-content">
            <h2>测试会话：富文本格式演示</h2>
        </header>

        <!-- 用户消息：普通文本 -->
        <div class="chat-content-item chat-content-item-user">
            <div class="message-time">10:30</div>
            <div class="message-content">
                你好，Kimi！我想了解一下如何编写一个Python函数来计算斐波那契数列。你能帮我吗？
            </div>
        </div>

        <!-- Kimi回复：包含代码块 -->
        <div class="chat-content-item chat-content-item-assistant">
            <div class="message-time">10:31</div>
            <div class="message-content">
                当然可以！斐波那契数列是一个经典的编程问题。这里有一个使用递归方法的实现：
                
                <pre><code class="language-python">def fibonacci(n):
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    else:
        return fibonacci(n-1) + fibonacci(n-2)

# 测试函数
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")</code></pre>
                
                不过，这个递归实现对于较大的数字可能会很慢。这里还有一个更高效的迭代版本：
                
                <pre><code class="language-python">def fibonacci_iterative(n):
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    
    a, b = 0, 1
    for i in range(2, n + 1):
        a, b = b, a + b
    return b</code></pre>
                
                使用<code>timeit</code>模块可以比较两者的性能差异。
            </div>
        </div>

        <!-- 用户消息：包含表格 -->
        <div class="chat-content-item chat-content-item-user">
            <div class="message-time">10:35</div>
            <div class="message-content">
                太棒了！我还想了解不同算法的性能对比。你能给我一个性能测试的表格吗？
                
                <table>
                    <thead>
                        <tr>
                            <th>算法类型</th>
                            <th>时间复杂度</th>
                            <th>空间复杂度</th>
                            <th>适用场景</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>递归算法</td>
                            <td>O(2^n)</td>
                            <td>O(n)</td>
                            <td>教学演示</td>
                        </tr>
                        <tr>
                            <td>迭代算法</td>
                            <td>O(n)</td>
                            <td>O(1)</td>
                            <td>实际应用</td>
                        </tr>
                        <tr>
                            <td>矩阵快速幂</td>
                            <td>O(log n)</td>
                            <td>O(1)</td>
                            <td>大数计算</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Kimi回复：包含引用和列表 -->
        <div class="chat-content-item chat-content-item-assistant">
            <div class="message-time">10:36</div>
            <div class="message-content">
                很好的问题！你提供的表格总结得很准确。让我补充一些关于算法选择的建议：
                
                <blockquote>
                    "算法的选择应该基于具体的应用场景。没有最好的算法，只有最适合的算法。" - 计算机科学格言
                </blockquote>
                
                以下是一些选择建议：
                
                <h4>🎯 选择指南</h4>
                
                <ol>
                    <li><strong>递归算法</strong> - 适合教学和理解递归概念</li>
                    <li><strong>迭代算法</strong> - 适合大多数实际应用场景</li>
                    <li><strong>矩阵快速幂</strong> - 适合需要计算极大斐波那契数的场景</li>
                </ol>
                
                <h4>💡 优化技巧</h4>
                
                <ul>
                    <li>使用<strong>记忆化</strong>来优化递归</li>
                    <li>考虑<strong>尾递归优化</strong></li>
                    <li>对于重复计算，使用<strong>缓存</strong></li>
                </ul>
                
                想了解更多吗？我可以提供完整的性能测试代码。
            </div>
        </div>

        <!-- 用户消息：包含图片和链接 -->
        <div class="chat-content-item chat-content-item-user">
            <div class="message-time">10:40</div>
            <div class="message-content">
                是的，我想看看完整的测试代码。另外，我找到了一个很棒的资源：
                
                <p>你可以参考这个<a href="https://realpython.com/fibonacci-sequence-python/" title="Python斐波那契数列教程">Python斐波那契数列教程</a>，里面有详细的解释。</p>
                
                <p>还有这个算法可视化工具：</p>
                <img src="https://via.placeholder.com/400x200/4CAF50/white?text=Algorithm+Visualization" alt="算法可视化工具" title="斐波那契算法可视化">
                
                <p>这个工具可以帮助你直观地理解不同算法的工作原理。</p>
            </div>
        </div>

        <!-- Kimi回复：包含复杂格式 -->
        <div class="chat-content-item chat-content-item-assistant">
            <div class="message-time">10:41</div>
            <div class="message-content">
                太好了！你找到的资源很有价值。让我为你提供一个完整的性能测试代码：
                
                <pre><code class="language-python">import time
import matplotlib.pyplot as plt

def benchmark_fibonacci_algorithms():
    algorithms = {
        'Recursive': fibonacci,
        'Iterative': fibonacci_iterative,
        'Matrix': fibonacci_matrix
    }
    
    results = {name: [] for name in algorithms}
    test_values = list(range(1, 21))
    
    for n in test_values:
        for name, func in algorithms.items():
            start_time = time.time()
            result = func(n)
            end_time = time.time()
            results[name].append(end_time - start_time)
    
    return test_values, results

# 运行基准测试
n_values, timing_results = benchmark_fibonacci_algorithms()

# 可视化结果
plt.figure(figsize=(10, 6))
for name, times in timing_results.items():
    plt.plot(n_values, times, marker='o', label=name)

plt.xlabel('n (Fibonacci Index)')
plt.ylabel('Time (seconds)')
plt.title('Fibonacci Algorithm Performance Comparison')
plt.legend()
plt.grid(True)
plt.show()</code></pre>
                
                <h3>📊 结果分析</h3>
                
                <p>这个测试会生成一个性能对比图，清楚地显示不同算法的效率差异。</p>
                
                <blockquote>
                    <strong>重要提醒：</strong>
                    递归算法在n>30时就会变得非常慢，甚至可能导致栈溢出。
                </blockquote>
                
                <p>你可以运行这个代码来验证我们之前讨论的性能差异。记得安装必要的依赖：</p>
                
                <code>pip install matplotlib</code>
                
                <p>有什么其他问题吗？我很乐意继续帮助你！</p>
            </div>
        </div>
    </div>

    <!-- 引入我们的导出脚本 -->
    <script src="kimi-k2-exporter.js"></script>
    
    <script>
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 测试页面已加载，导出脚本应该已经自动初始化');
            console.log('💡 点击右下角的导出按钮来测试功能');
            
            // 显示一些调试信息
            setTimeout(() => {
                const messages = document.querySelectorAll('.chat-content-item');
                console.log(`📊 找到 ${messages.length} 条消息用于测试`);
                
                const title = document.querySelector('.chat-header-content h2');
                console.log(`📋 会话标题: ${title ? title.textContent : '未找到'}`);
            }, 1000);
        });
    </script>
</body>
</html>